<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>all in JS</p>
  <div id="app"></div>
  <!-- 核心库 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <!-- 操作dom -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!-- jsx的依赖 -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    let num = 5;
    let className = 'btn666';
    let person = {
      age: 18,
      name: 'Jack'
    }
    let cart = [
      {name: 'huawei', price: 9999},
      {name: 'xiaomi', price: 8999},
      {name: 'vivo', price: 7999},
    ]
    function add(a, b) {
      return a+b
    }
    // ====================
    // 1. 简单的变量替换
    // 2. 变量运算
    // 3. 三目运算
    // 4. 函数调用
    // 5. 绑定属性或者文本都可以
    // ====================
    // 1. 创建元素
    let elBtn1 = <button className={className} id="btn1">{person.name}充值{num+1}元{person.age>18?'允许': '禁止'}</button>;
    let elBtn2 = <button>{add(1,2)}</button>
    let elDiv = 
      (<div>
      {(function() {
        if(person.age >= 18) {
          return <p>欢迎光临</p>
        }else {
          return <p>禁止入内</p>
        }
      })()}
      </div>)
    let elUl = (<ul>
        {cart.map((item, index) => {
          return (<li key={index}>{item.name}---{item.price}</li>)
        })}
      </ul>)
    // console.log(typeof elBtn);
    let rootEl = document.getElementById('app');
    // 2. 渲染
    ReactDOM.render(elUl, rootEl);
  </script>
</body>
</html>